<template>
  <div class="page">
    <h2 class="volunteer-title">
      <span>合理化建议</span>
      <!-- <ul>
        <li>开始检查</li>
      </ul> -->
    </h2>
    <div class="container" ref="container" :class="{'font-yellow':isOptimal||isAnalysisOver}">
      <div class="panel linear-light-blue light">
        <div class="btn-analysis" @click="clickAnalysis">
          <label class="analysis-bg" :class="{'analysis-backImg':isAnalysis,'backImg-yellow':isOptimal&&isAnalysis,'analysis-backImg-yellow':isAnalysisOver,'perfect-backImg':isPerfect}"></label>
          <!-- <label class="analysis-name" v-html="analysisName"></label> -->
          <label class="analysis-name">立即分析</label>
        </div>
        <div class="optimizable">
            <div>
              <p class="title">大学</p>
              <p class="num yellow">{{list?list.collegeCnt:"-"}}</p>
              <p class="description">项可优化</p>
            </div>
            <div>
              <p class="title">专业</p>
              <p class="num yellow">{{list?list.majorCnt:"-"}}</p>
              <p class="description">项可优化</p>
            </div>
        </div>
      </div>
      <div class="details">
        <h2>合理化检查项</h2>
        <p class="title">大学</p>
        <!-- <div class="item" style="display:block" v-for="(item,index) in schoolTitle" :key="index" v-if="list[index]"> -->
        <div class="item" style="display:block" v-for="(item,index) in schoolTitle" :key="index">
          <div class="item-content">
            <h3>
              <span>{{item}}</span>
              <i class="icon" v-show="showIcon" :class="list[index]?'c-0 icon-Shape':'c-1 icon-gou'"></i>
            </h3>
          </div>
          <div v-if="list[index]">
            <div class="warn-content">
              <p class="yellow">{{list[index]}}</p>
            </div>
          </div>
        </div>
        <p class="title">专业</p>
        <div class="item" style="display:block" v-for="(item,index) in majorTitle" :key="index+'1'">
          <div class="item-content">
            <h3>
              <span>{{item}}</span>
              <i class="icon" v-show="showIcon" :class="list[index]?'c-0 icon-Shape':'c-1 icon-gou'"></i>
            </h3>
          </div>
          <div v-if="list[index]">
            <div class="warn-content">
              <p class="yellow">{{list[index]}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from '@/utils'
let container
export default {
  data () {
    return {
      showIcon: false,
      schoolTitle: {
        collegeSteady: '是否有保底学校',
        collegeProbability: '录取概率顺序是否是从低到高',
        collegeProbabilityDeficiency: '是否存在较难预测学校',
        collegeChongShouBaoSeq: '冲守保分配合理性(3:4:3)',
        collegeFull: '学校是否填满'
      },
      majorTitle: {
        majorProbability: '录取概率顺序是否是从低到高',
        majorProbabilityDeficiency: '是否存在较难预测概率的专业',
        majorFull: '专业是否填满'
      },

      batchId: 1001,
      list: '',
      coverShow: false,
      title: '合理化建议',
      analysisName: '立即分析',
      isAnalysis: false, // 分析
      isAnalysisOver: false, // 分析结束
      isOptimal: false, // 优化
      isPerfect: false, // 完美
      typeData: [{
        name: '大学',
        num: '-',
        description: '项可优化'
      }, {
        name: '专业',
        num: '-',
        description: '项可优化'
      }],
      collegeData: [{
        name: '是否有保底学校',
        quote: '录取率≥98%',
        isSuccess: false,
        optimalData: [{
          warn: '没有保底学校,建议添加',
          type: '去添加',
          url: 'volunteer-school-list'
        }]
      }, {
        name: '录取概率顺序是否是从低到高',
        quote: '',
        isSuccess: false,
        optimalData: [{
          warn: '顺序不合理,是否需要自动调整',
          type: '自动调整',
          url: 'volunteer-school-list'
        }]
      }, {
        name: '是否存在较难预测学校',
        quote: '',
        isSuccess: false,
        optimalData: [{
          warn: '志愿A:湖南商学院(批次变更)',
          type: '去调整',
          url: 'fill-index'
        }]
      }, {
        name: '冲守保分配合理性(3:4:3)',
        quote: '',
        isSuccess: true
      }, {
        name: '学校是否填满',
        quote: '',
        isSuccess: false,
        optimalData: [{
          warn: '本一:志愿E,志愿F,志愿G 未填写',
          type: '去填写',
          url: ''
        }, {
          warn: '本一:志愿E,志愿F,志愿G 未填写',
          type: '去填写',
          url: ''
        }]
      }],
      majorData: [{
        name: '录取概率顺序是否是从低到高',
        quote: '意向的放前面',
        isSuccess: false,
        optimalData: [{
          warn: '志愿A,志愿B :顺序不合理',
          type: '去调整',
          url: 'volunteer-school-list'
        }]
      }, {
        name: '是否存在较难预测概率的专业',
        quote: '',
        isSuccess: false,
        optimalData: [{
          warn: '顺序不合理,是否需要自动调整',
          type: '去调整',
          url: 'volunteer-school-list'
        }]
      }]
    }
  },
  methods: {
    init (msg = 1001) {
      this.batchId = msg
      this.list = ''
      this.showIcon = false
      this.analysis()
    },
    // 切换批次立即分析
    analysis () {
      this.$axios.get(api.getReasonableAnalysis, { params: { batchId: this.batchId } }).then(data => {
        if (data) {
          this.list = data
          this.showIcon = true
        } else {
          this.showIcon = false
        }
      })
    },
    // 点击分析
    clickAnalysis () {
      this.$axios.get(api.checkReasonableAnalysis, { params: { batchId: this.batchId } }).then(data => {
        if (data) {
          this.list = data
          this.showIcon = true
        } else {
          this.list = ''
          this.showIcon = false
          this.$message.error('请先填写内容')
        }
      })
      if (this.isPerfect) {
        this.isPerfect = false
        this.analysisName = `立即分析`
      } else {
        if (!this.isAnalysis && !this.isAnalysisOver) {
          this.isAnalysis = true
        }
        if (this.isAnalysis) {
          if (!this.isOptimal) {
            setTimeout(() => {
              this.isOptimal = true
              this.analysisName = `<span class="num">6</span><span class="optimal-name">项可优化</span>`
              setTimeout(() => {
                this.isAnalysis = false
                this.isAnalysisOver = false
                this.isOptimal = false
                this.isPerfect = false
              }, 1000)
            }, 1000)
          }
        }
      }
    },
    // 自动调整
    autoAdjust () {
      if (this.isAnalysisOver) {
        this.isAnalysisOver = false
        this.isOptimal = true
        this.isAnalysis = true
        this.analysisName = `<span class="adjust">调整中...</span>`
        setTimeout(() => {
          this.isOptimal = false
          this.analysisName = `<span class="energized">调整中...</span>`
          setTimeout(() => {
            this.isPerfect = true
            this.isAnalysis = false
            this.analysisName = `<span class="prefect">完美</span>`
          }, 1000)
        }, 1000)
      }
    },
    handleScroll () {
      if (container.scrollTop > 10) {
        this.coverShow = true
      } else {
        this.coverShow = false
      }
    }
  },
  computed: {

  },
  created () {
    // this.analysis()
  },
  mounted () {
    this.$nextTick(function () {
      container = this.$refs['container']
      window.addEventListener('scroll', this.handleScroll, true)
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="scss" scoped>
.page {
  width:375px;
  font-size: 18px;
  background: $light;
  padding-bottom: 30px;
  border-radius: 10px;
  .nav-bar {
    &.cover {
      /deep/ .van-nav-bar {
        background-color: rgba(0, 0, 0, 0.3) !important;
      }
    }
    /deep/ .van-icon,
    /deep/ .van-nav-bar__title {
      color: #FFF;
    }
  }
  .container {
    padding: 0;
    .panel {
      border-radius: 0px 0px 10px 10px;
      text-align: center;
      .cover {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: gray;
        opacity: 0.7;
      }
      .btn-analysis {
        cursor:pointer;
        display: inline-block;
        position: relative;
        margin-top: 18px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-color: $table-y;
        color: #FFF;
        .analysis-bg {
          /* 分析-白色背景 */
          cursor:pointer;
          position: absolute;
          top: 5px;
          left: 5px;
          right: 5px;
          bottom: 5px;
          background-image: url("/images/analysis01.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 50%;
          &.analysis-backImg {
            /* 分析-半蓝色旋转背景 */
            background-image: url("/images/analysis02.png") !important;
            animation: rotation 1s linear infinite;
            transform: rotate(360deg);
          }
          &.backImg-yellow {
            /* 分析-半黄色旋转背景 */
            background-image: url("/images/analysis03.png") !important;
            animation: rotation 1s linear infinite;
            transform: rotate(360deg);
          }
          &.analysis-backImg-yellow {
            /* 优化-黄色背景 */
            background-image: url("/images/analysis04.png") !important;
          }
          &.perfect-backImg {
            /* 完美-蓝色 */
            background-image: url("/images/analysis05.png") !important;
          }
        }
        .analysis-name {
          cursor:pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: inherit;
          height: inherit;
          /deep/ {
            .num {
              color: #FFF;
              font-size: 72px;
              position: relative;
              margin-top: -20px;
            }
            .optimal-name {
              color: #FFF;
              font-size: 14px;
              margin-top: -20px;
            }
            .prefect {
              font-size: 36px;
              color: gray;
            }
            .adjust {
              color: #FFF;
            }
          }
        }
      }
    }
    .optimizable {
      height: 111px;
      margin: 0 15px;
      margin-top: 30px;
      top: 53px;
      display:flex;
      justify-content: space-between;
      align-items:center;
      >div{
        width:49%;
        height:100%;
        background:#F7F7FB;
        display:flex;
        justify-content: center;
        align-items:center;
        flex-direction: column;
      }
      /deep/ .van-cell {
        height: 111px;
        padding: 0px !important;
        > .van-cell__value {
          display: flex;
          > div {
            flex: 1;
            text-align: center;
            color: #69707F;
            padding: 10px 0;
            &:first-child {
              border-right: 1px solid #adadad;
            }
            .title {
              font-size: 18px;
              color: #69707F;
            }
            .num {
              font-size: 36px;
              height: 50px;
              line-height: 50px;
              color: #FFA800;
            }
            .description {
              font-size: 14px;
              color: #69707F;
            }
          }
        }
      }
    }
    .details {
      padding: 0 15px 0;
      > h2,p {
        // color: gray;
      }
      > h2 {
        text-align: center;
        padding: 25px 0 15px;
        font-size:18px;
        color:#69707F;
      }
      > .title {
        height:60px; line-height:60px; padding:0 12px;
        border-bottom:1px solid $line;
        font-size: 24px;
        color:#333;
      }
      > .item {
        .item-content {
          padding:15px 10px;
          display: flex;
          align-items: center;
          border-bottom:1px solid $line;
          > h3 {
            flex:1;
            font-weight: normal;
            color: #333 !important;
            display: flex;
            justify-content: space-between;
            i{
              // color:$table-y;
            }
          }
          > span {
            margin-left: 5px;
            font-size:14px;
            color:#ADADAD;
          }
          > i {
            position: absolute;
            right: 10px;
            background-color: #FFF;
          }
        }
        .border-top {
          border-top: 1px solid gray;
          position: absolute;
          left: -15px;
          right: -15px;
          height: 1px;
          margin-left: -15px;
          padding-left: -15px;
          margin-right: -15px;
        }
        .warn-content {
          font-size:14px;
          padding: 15px 10px;
          border-bottom: 1px solid #E6E6E6;
          color:$table-y;
          display: flex;
          justify-content: space-between;
          .btn-optimal {
            color: $positive;
          }
        }
        &.item-warn {
          display:flex;
          flex-direction: column;
          padding-bottom: 0px !important;
          .item-content {
            // padding-bottom: 20px;
          }
        }
      }
    }
    &.font-yellow {
      .num,
      .van-button {
        color: $yellow !important;
      }
    }
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
